<template>
  <van-dialog
    v-model="dialogVisible"
    :show-confirm-button="false"
    :show-cancel-button="false"
    :close-on-click-overlay="closeOnClickOverlay"
    class="common-dialog"
    @close="handleClose">
    <!-- 自定义标题 -->

    <div  class="text-center text-lg font-medium text-gray-800 mb-4 px-4 pt-4">
      <span v-if="title">{{ title }}</span>
      <van-icon v-if="closeable" name="cross" size="26" class="absolute top-4 right-4 z-10" @click="handleClose" />
    </div>

    <!-- 内容区域 -->
    <div class="px-6 pb-4">
      <!-- 简单文本内容 -->
      <div v-if="content && !$slots.default" class="text-center text-gray-600 text-sm leading-relaxed mb-6">
        {{ content }}
      </div>

      <!-- 复杂内容使用slot -->
      <div v-if="$slots.default" class="mb-6">
        <slot></slot>
      </div>

      <!-- 按钮区域 -->
      <div v-if="buttons && buttons.length > 0" class="flex space-x-10">
        <button v-for="(button, index) in buttons" :key="index" :class="getButtonClass(button)" @click="handleButtonClick(button, index)">
          {{ button.text }}
        </button>
      </div>
    </div>
  </van-dialog>
</template>

<script>
import { Dialog } from "vant"

export default {
  name: "CommonDialog",
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  props: {
    // 控制弹框显示隐藏
    visible: {
      type: Boolean,
      default: false,
    },
    // 弹框标题
    title: {
      type: String,
      default: "",
    },
    // 简单文本内容
    content: {
      type: String,
      default: "",
    },
    // 按钮配置数组
    buttons: {
      type: Array,
      default: () => [],
      // 按钮格式: [{ text: '按钮文字', type: 'primary|secondary', action: 'confirm|cancel|custom' }]
    },
    // 是否显示关闭按钮
    closeable: {
      type: Boolean,
      default: true,
    },
    // 点击遮罩是否关闭
    closeOnClickOverlay: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(value) {
        this.$emit("update:visible", value)
      },
    },
  },
  methods: {
    // 获取按钮样式类
    getButtonClass(button) {
      const baseClass = "flex-1 h-10 rounded-lg font-medium text-base transition-colors duration-200"

      if (button.type === "primary") {
        return `${baseClass} bg-orange-500 hover:bg-orange-600 text-white`
      } else if (button.type === "secondary") {
        return `${baseClass} bg-orange-100 hover:bg-orange-200 text-[#ff7a00]`
      } else {
        return `${baseClass} bg-gray-100 hover:bg-gray-200 text-gray-700`
      }
    },

    // 处理按钮点击
    handleButtonClick(button, index) {
      // 触发按钮点击事件
      this.$emit("button-click", {
        button,
        index,
        action: button.action || "custom",
      })
    },

    // 处理弹框关闭
    handleClose() {
      this.$emit("close")
      this.$emit("update:visible", false)
    },
  },
}
</script>

<style scoped>
/* 自定义弹框样式 */
:deep(.van-dialog) {
  border-radius: 16px;
  overflow: hidden;
}

:deep(.van-dialog__header) {
  padding: 0;
}

:deep(.van-dialog__content) {
  padding: 0;
}

:deep(.van-dialog__close) {
  top: 16px;
  right: 16px;
  color: #999;
  font-size: 20px;
}

/* .common-dialog {
  max-width: 340px;
  width: 90%;
} */
</style>
